<template>
  <div class="inforoom">
    <div class="picTop">
      <swiper
        indicator-dots="true"
        autoplay="true"
        interval="3000"
        duration="500"
        circular="true"
      >
        <block
          v-for="item in infoRoomData.file"
          :key="item.id"
        >
          <swiper-item>
            <image
              mode="aspectFill"
              :src="item.url"
            ></image>
          </swiper-item>
        </block>
      </swiper>
    </div>

    <div class="house">
      <div class="house_title">{{infoRoomData.title}}</div>
      <div class="house_area">
        <div>
          <p>售价</p>
          <em>{{infoRoomData.price}}</em>
        </div>
        <div>
          <p>户型</p>
          <em>{{infoRoomData.room}}室{{infoRoomData.living_room}}厅{{infoRoomData.toilet}}位</em>
        </div>
        <div>
          <p>面积</p>
          <em>{{infoRoomData.acreage}}</em>
        </div>
      </div>
      <div class="house_small">
        <li>
          <span>单位：<em>{{infoRoomData.average_price}}</em></span>
          <span>装修：<em>{{infoRoomData.renovation}}</em></span>
        </li>
        <li>
          <span>楼层：<em>{{infoRoomData.floor}}/{{infoRoomData.total_floor}}层</em></span>
          <span>朝向：<em>{{infoRoomData.orientations}}</em></span>
        </li>
        <li>
          <span>类型：<em>住宅</em></span>
          <span>年代：<em>2016</em></span>
        </li>
        <li>
          <span>更新：<em>{{infoRoomData.create_time}}</em></span>
        </li>
        <li>
          <span>小区：<em>{{infoRoomData.estate_name}}</em></span>
        </li>
        <li>
          <span>地址：<em>{{infoRoomData.address}}</em></span>
        </li>
      </div>
    </div>
  </div>
</template>

<script>
import { getRoomInfo } from "../../service/index";

export default {
  data() {
    return {
      infoData: [],
      name: "second",
      id: "",
      infoRoomData: []
    };
  },

  onLoad(options) {
    this.id = options.id;
  },
  async onShow() {
    let result = await getRoomInfo(this.id);
    console.log(result);

    if (result.code === 200) {
      this.infoRoomData = result.data;
      console.log(this.infoRoomData);
    }
  },

};
</script>

<style lang='scss'>
.inforoom {
  width: 100%;
  height: 100%;

  .picTop {
    width: 100%;
    height: 352rpx;

    image {
      width: 100%;
      height: 352rpx;
    }
  }

  .house {
    width: 100%;
    height: 830rpx;

    .house_title {
      // width: 100%;
      padding: 30rpx 50rpx;
      font-size: 40rpx;
      border-bottom: 1px solid rgb(233, 233, 233);
    }

    .house_area {
      width: 100%;
      height: 180rpx;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgb(233, 233, 233);

      div {
        flex: 1;
        text-align: center;

        p {
          font-size: 32rpx;
          color: #868686;
          height: 60rpx;
          line-height: 60rpx;
        }

        em {
          color: #00AC00;
          font-weight: bold;
        }
      }
    }

    .house_small {
      width: 100%;
      li {
        width: 100%;
        display: flex;

        span {
          flex: 1;
          font-size: 32rpx;
          padding: 20rpx 0;
          color: #868686;

          em {
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>
